/*
 * @Author: along
 * @Date: 2020-07-07
 * @Last Modified by: along
 * @Last Modified time: 2020-07-07
 */
<template>
    <el-dialog
        :visible.sync="dialog"
        :width="width + 'px'"
        :center="true"
        :show-close="false"
        class="zsdx_dialog"
    >
        <div class="zsdx_wrap">
            <img
                src="http://cdn.zsdx.cn/student-app/images/dialog_logo.png"
                class="zsdx_logo"
            >
            <div
                v-if="!!title"
                class="zsdx_title"
            >
                {{ title }}
            </div>
            <div
                v-if="!!content"
                class="zsdx_content"
            >
                {{ content }}
            </div>
            <div class="zsdx_button">
                <el-button
                    v-if="!!cancelText"
                    type="default"
                    size="medium"
                    :style="{width: '120px',marginRight: '32px'}"
                    @click="close()"
                >
                    {{ cancelText }}
                </el-button>
                <el-button
                    v-if="!!confirmText"
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="emit()"
                >
                    {{ confirmText }}
                </el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialog: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '提示'
        },
        width: {
            type: Number,
            default: 388
        },
        content: {
            type: String,
            default: ''
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        confirmText: {
            type: String,
            default: '确认'
        }
    },
    methods: {
        close () {
            this.$emit('close');
        },
        emit () {
            this.$emit('close');
            this.$emit('emit');
        }
    }
};
</script>

<style lang="less">
.zsdx_dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10%;
    .zd-dialog-text {
        color: #333;
        line-height: 23px;
        text-align: center;
    }
    .zd-dialog-foot {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 38px;
        margin-bottom: 10px;
    }
    .el-dialog__header {
        display: none !important;
    }
    .zsdx_wrap {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .zsdx_logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin-bottom: 16px;
        }
        .zsdx_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        .zsdx_content {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            margin-bottom: 24px;
        }
        .zsdx_button {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>